<template>
  <div>
    <el-dialog title="个人信息" :visible.sync="show" :destroy-on-close="false" convert-record :append-to-body="true" view-crash-manage class="personalInfo_dialog" :close-on-click-modal="false">
      <ul class="user-info">
        <li><div style="height: 100%"><svg-icon icon-class="login" /> 登录账号<div class="user-right">{{ user.username }}</div></div></li>
        <li><svg-icon icon-class="user1" /> 用户昵称 <div class="user-right">{{ user.nickName }}</div></li>
        <li v-if="user.dept"><svg-icon icon-class="dept" /> 所属部门 <div class="user-right"> {{ user.dept.name }}</div></li>
        <li><svg-icon icon-class="phone" /> 手机号码 <div class="user-right">{{ user.phone }}</div></li>
        <li><svg-icon icon-class="email" /> 用户邮箱 <div class="user-right">{{ user.email }}</div></li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: 'PersonalInfo',
  props: ['showInfo', 'userInfo'],
  data() {
    return {
      show: this.showInfo, // 弹框是否显示
      user: {}// 用户信息
    }
  },
  watch: {
    showInfo: {
      handler: function(val) {
        this.show = this.showInfo
      },
      immediate: true
    },
    show: {
      handler: function(val) {
        this.$emit('update:showInfo', val)
      },
      immediate: true
    },
    userInfo: {
      handler: function(val) {
        this.user = this.userInfo
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /* 关闭对话框*/
    dialogClose() {
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
.user-info {
  padding-left: 0;
  list-style: none;
  li{
    border-bottom: 1px solid #F0F3F4;
    padding: 15px 0;
    font-size: 13px;
  }
  .user-right {
    float: right;
    width: 60%;
    text-align: right;
    a{
      color: #317EF3;
    }
  }
}
</style>
<style lang="scss">
.personalInfo_dialog[view-crash-manage] {
  .el-dialog {
    width: 360px;
  }
  .el-dialog__body{
    padding:0 33px !important;
  }
}
</style>
